@react-navigation/routers

What is @react-navigation/routers?

@react-navigation/routers is a package that provides the core router functionality for React Navigation. It allows you to define and manage navigation state, handle navigation actions, and manage the history stack in a React application.

What are @react-navigation/routers's main functionalities?

Creating a Stack Router

This feature allows you to create a stack-based router, which is useful for managing navigation in a stack-like manner where screens are pushed and popped off the stack.

const { StackRouter } = require('@react-navigation/routers');

const router = StackRouter({
  Home: 'HomeScreen',
  Profile: 'ProfileScreen'
});

Creating a Tab Router

This feature allows you to create a tab-based router, which is useful for applications that use a tab bar to switch between different screens.

const { TabRouter } = require('@react-navigation/routers');

const router = TabRouter({
  Home: 'HomeScreen',
  Settings: 'SettingsScreen'
});

Handling Navigation Actions

This feature allows you to handle navigation actions such as navigating to a different screen. The router updates the navigation state based on the action.

const { StackRouter, NavigationActions } = require('@react-navigation/routers');

const router = StackRouter({
  Home: 'HomeScreen',
  Profile: 'ProfileScreen'
});

const state = router.getStateForAction(NavigationActions.navigate({ routeName: 'Profile' }));

Other packages similar to @react-navigation/routers

react-router

React Router is a popular library for routing in React applications. It provides a declarative way to define routes and manage navigation state. Compared to @react-navigation/routers, React Router is more widely used and has a larger community, but it may not be as tightly integrated with React Navigation's ecosystem.

wouter

Wouter is a minimalist routing library for React. It provides a small and fast solution for routing with a simple API. Compared to @react-navigation/routers, Wouter is more lightweight and may be a good choice for smaller projects or those that require minimal routing functionality.

reach-router

Reach Router is a small, simple router for React that focuses on accessibility and simplicity. It is designed to be easy to use and understand. Compared to @react-navigation/routers, Reach Router emphasizes accessibility and may be a better choice for projects that prioritize this aspect.

README

@react-navigation/routers

Routers to help build custom navigators.

You probably don't need to use this package directly if you're not building custom navigators.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/routers

Usage

Documentation can be found on the React Navigation website.